<template>
  <!-- 活动列表详情 -->
  <div class="xiangqbox">
    <div style="background-color: #ffffff; padding: 15px">
      <div class="headerbox">
        <div>
          <span>当前审批状态:</span>
          <span v-if="urlParams.assessmentStatus == 0" style="color:#428bca">
            审批发起
          </span>
          <span v-else-if="urlParams.assessmentStatus == 1" style="color: #5cb85c">
            审批通过
          </span>
          <span v-else-if="urlParams.assessmentStatus == 2" style="color: red">
            审批拒绝
          </span>
        </div>
      </div>
      <h4>审批信息</h4>
      <div class="infobox">
        <div class="infobox_header">
          <div class="header_item">
            {{ urlParams.flowType == 2 ? '加班' : urlParams.flowType == 3 ? '调休' : '' }}发起人:{{ this.$route.query.initiator||'' }}
          </div>
          <div class="header_item">
            {{ urlParams.flowType == 2 ? '加班' : urlParams.flowType == 3 ? '调休' : '' }}人:{{ this.$route.query.nickName }}
          </div>
          <div class="header_item">
            {{ urlParams.flowType == 2 ? '加班' : urlParams.flowType == 3 ? '调休' : '' }}部门:{{ this.$route.query.departmentTitle }}
          </div>
          <div class="header_item">
            {{ urlParams.flowType == 2 ? '加班' : urlParams.flowType == 3 ? '调休' : '' }}岗位:{{ this.$route.query.postTitle }}
          </div>
          <div class="header_item">
            {{ urlParams.flowType == 2 ? '加班' : urlParams.flowType == 3 ? '调休' : '' }}发起时间:{{ this.$route.query.time }}
          </div>
        </div>
        <div
          class="histroybox"
          :style="{
            overflowX: 'hidden',
            overflowY: 'auto'}"
        >
          <el-timeline :reverse="reverse">
            <el-timeline-item v-for="(activity, index) in activities" :key="index" :timestamp="activity.timestamp" placement="top">
              <div class="timeLine">
                <div class="content">{{ activity.content }}</div>
                <div class="status" :style="{color:(activity.assessmentStatus==='审核通过'?'rgb(92, 184, 92)':activity.assessmentStatus==='未审核'?'#FF0000':activity.assessmentStatus==='审核拒绝'?'red':'#657d28')}">
                  #{{ activity.assessmentStatus }}
                </div>
                <div class="time">
                  <span>{{ setText(activity.assessmentStatus) }}</span>
                  <span :style="{color:(activity.elapsedTimeStatus==='1'?'#FF0000':'#000')}">{{ activity.elapsedTime ||'' }}</span>
                </div>
              </div>
            </el-timeline-item>

          </el-timeline>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog'
export default {
  directives: {
    elDragDialog
  },
  data() {
    return {
      processInstanceId: null,
      tableData: [],
      activities: [],
      gridData: [],
      reverse: true,
      tableH: 0,
      urlParams: {}
    }
  },
  computed: {

    setText() {
      return function(assessmentStatus) {
        if (assessmentStatus === '未审核') {
          return '已用时'
        } else if (assessmentStatus === '审核通过') {
          return '用时'
        }
      }
    }
  },
  mounted() {
    this.fetTableHeight()
  },
  created() {
    this.getid()
    this.geteventdetailsList()
  },
  methods: {
    resetHeight() {
      return new Promise((resolve, reject) => {
        this.tableH = 0
        resolve()
      })
    },
    // 设置table高度
    fetTableHeight() {
      this.resetHeight().then((res) => {
        this.tableH =
          this.$refs.tableWrapper.getBoundingClientRect().height - 10
      })
    },
    // 详情内容
    async geteventdetailsList() {
      try {
        const res = await this.$Http.getHkOvertimeDetial({
          processInstanceId: this.processInstanceId
        })
        if (res.code === 200) {
          this.tableData = res.result.hkAssessmentScores
          for (var i = 0; i < res.result.hkAssessmentRecordVos.length; i++) {
            this.activities.push({
              content: `${res.result.hkAssessmentRecordVos[i].nickName}`,
              timestamp: res.result.hkAssessmentRecordVos[i].time,
              elapsedTime: res.result.hkAssessmentRecordVos[i].elapsedTime,
              assessmentStatus: res.result.hkAssessmentRecordVos[i].assessmentStatus,
              elapsedTimeStatus: res.result.hkAssessmentRecordVos[i].elapsedTimeStatus

            })
          }
        } else {
          this.$message({
            type: 'error',
            message: res.message
          })
        }
      } catch (err) {
        console.log('err', err)
      }
    },
    // 拿id
    getid() {
      this.processInstanceId = this.$route.query.processInstanceId
      this.urlParams = this.$route.query
    }
  }
}
</script>

<style lang="scss" scoped="scoped">
.xiangqbox {
  padding: 25px;
  .headerbox {
    width: 100%;
    height: 30px;
    display: flex;
    align-items: center;
    padding: 10px;
    border-radius: 5px;
    box-sizing: border-box;
    margin-bottom: 20px;
    background-color: rgba(144, 147, 153, 0.1);
    box-shadow: 2px 2px rgba(144, 147, 153, 0.2);
  }
  .infobox {
    margin-bottom: 10px;
    margin-top: 20px;
    width: 100%;
    height: 500px;
    border-radius: 10px;
    border: 1px rgba(144, 147, 153, 0.2) solid;
    box-sizing: border-box;
    .infobox_header {
      width: 100%;
      height: 50px;
      padding: 5px;
      border-bottom: 1px rgba(144, 147, 153, 0.2) solid;
      display: flex;
      align-items: center;
      justify-content: space-around;
      box-sizing: border-box;
    }
    .infobox_bottom {
      width: 100%;
      height: calc(100% - 60px);
      padding: 10px;
    }
  }
  .histroybox {
    width: 100%;
    height: 300px;

    border-radius: 10px;
    padding: 20px;
    box-sizing: border-box;
    .timeLine{
      width: 30%;
      display: flex;
      align-content: center;
      justify-content:  space-between;
      .content{
        white-space: nowrap;
      }

      .status{
        margin-left: 10px;
        width: 200px;
      }
      .time{
         margin-left: 30px;
        width: 180px;

      }
    }

  }
}
</style>
